<template lang="html">
    <div class="coruse-detail">
        <nav-header>
        <li><router-link to="/teaching/scheduling/course-list">排课列表</router-link><li>
        <li class="gap">&gt;</li>
        <li>详情</li>
        </nav-header>
        <el-form ref="form" class="form" :model="form" label-width="90px">
        <el-form-item label="直播时间" class="item-star">
            <el-col :span="8">
            <el-date-picker type="date" :readonly="true" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1" style="text-align: center;">-</el-col>
            <el-col :span="7">
            <el-time-picker type="fixed-time" :readonly="true" value-format="hh:mm:ss" v-model="form.ftime" style="width: 100%;"></el-time-picker>
            </el-col>
            <el-col class="line" :span="1" style="text-align: center;">-</el-col>
            <el-col :span="7">
            <el-time-picker type="fixed-time" :readonly="true" value-format="hh:mm:ss" v-model="form.ltime" style="width: 100%;"></el-time-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="公开课名称" class="item-star">
            <el-input v-model="form.name" :readonly="true"></el-input>
        </el-form-item>
        <div class="form-item">
            <el-form-item label="授课教师" class="item-star">
            <el-input v-model="form.create_name" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="直播设备" class="item-star">
            <el-input v-model="form.recorder_name" :readonly="true"></el-input>
            </el-form-item>
        </div>
        <div class="form-item">
            <el-form-item label="所属学校" class="item-star">
            <el-input v-model="form.name" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="学段" class="item-star">
            <el-input v-model="form.study_section_name" :readonly="true"></el-input>
            </el-form-item>
        </div>
        <div class="form-item">
            <el-form-item label="年级" class="item-star">
            <el-input v-model="form.grade_name" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="科目" class="item-star">
            <el-input v-model="form.subject_name" :readonly="true"></el-input>
            </el-form-item>
        </div>
        <div class="form-item">
            <el-form-item label="课型">
            <el-input v-model="form.teaching_type" :readonly="true"></el-input>
            </el-form-item>
        </div>
        <el-form-item label="课程简介">
            <el-input v-model="form.profile" :readonly="true"></el-input>
        </el-form-item>
        <!-- <el-form-item label="封面图片" v-show="form.picture">
            <div class="form-cover">
            <img :src="BASE_URL+form.picture">
            </div>
        </el-form-item> -->
        <el-form-item label="是否录制">
            <el-radio-group v-model="form.is_record">
            <el-radio :label="1">录制</el-radio>
        </el-radio-group>
        </el-form-item>
        <div class="">
            <el-button type="text" @click="checkSource">查看附件</el-button>
        </div>
        </el-form>

        <el-dialog
        title="查看附件"
        :visible.sync="accessoryFlag"
        :close-on-click-modal="false" 
        :close-on-press-escape="false"
        width="50%"
        >
        <ul class="textarea-box">
            <li v-for="(src,srcInx) in sourceList">
                <div class="acc-name">
                <span v-text="src.name">附件名称.png</span>
                </div>
                <div class="acc-r">
                <el-button type="text" @click="viewResource(src)">预览</el-button>
                <el-button type="text" @click="down(src.id)">下载</el-button>
                <el-button type="text" class="delete-button" @click="delete_confirm(src)">删除</el-button>
                </div>
            </li>
        </ul>
        </el-dialog>
        <el-dialog
        title="智慧排课"
        :visible.sync="tipsFlag"
        :close-on-click-modal="false" 
        :close-on-press-escape="false"
        width="30%"
        >
        <div>你上传的 这是文件名称.png 文件已被管理员删除</div>
        <span slot="footer" class="dialog-footer tips-footer">
            <span class="footer-time"> XXX  03月08日21：00 </span>
            <el-button type="text">置顶</el-button>
            <el-button type="text">查看</el-button>
        </span>
        </el-dialog>
        <transition name="el-fade-in-linear" >
                <div class="masking" :class="{ activeLive: isActive }">
                    <div class="maskingBox"
                        v-loading="viewLoading.status"
                        :element-loading-text="viewLoading.txt"
                    >
                        <div class="masking_h">
                            <span>视频预览</span>
                            <i class="el-icon-close" @click="viewClose"></i>
                        </div>
                        <div class="masking_c">
                            <nativeVideo  v-if="showVideoPlayer" :playParam.sync="playParam" >
                            </nativeVideo>
                        </div>
                    </div>
                </div>
            </transition>
            <transition name="el-fade-in-linear" lock-scroll="false" >
                <div class="masking" :class="{ activeLive: isPDFActive }">
                    <div class="maskingBox">
                        <div class="masking_h">
                            <span>文档预览</span>
                            <i class="el-icon-close" @click="viewPDFClose"></i>
                        </div>
                        <div class="masking-document">
                            <div class="pdf-View">
                                <iframe :src="viwPdfParam.src" frameborder="0" style="width: 100%; height: 100%;"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
            
            <image-viewer
                v-if="imagePreview.showViewer"
                :initial-index="imageIndex"
                :on-close="closeViewer"
                :url-list="imagePreview.previewSrcList">
            </image-viewer>

            <el-dialog
                title="音频预览"
                :visible.sync="voiceVisible"
                width="auto"
                style="min-width:550px;"
                top="0"
                custom-class="imgVisible"
                :close-on-click-modal="false"
                :before-close="closeAudio">
                <div class="imgViewx">
                    <audio id="voicepoauy" controls="controls" :src="voiceViewUrl"  controlsList="nodownload" autoplay>
                    Your browser does not support the audio tag.
                    </audio>
                </div>
            </el-dialog>
    </div>
</template>

<script>
import nativeVideo from '../../public/nativeVideo'

    export default {
    data() {
        return {
            imagePreview: {
                showViewer: false,
                previewSrcList: []
            },
            type: this.$route.query.type,
            accessoryFlag: false,
            tipsFlag: false,
            value: '',
            form: {},
            sourceList: [],
            isActive: true,
            isPDFActive: true,
            viwPdfParam:{
                src:'',
                loadedRatio: 0,
                page: 1,
                numPages: 0,
                rotate: 0,
            },
            imgVisible: false,
            imgViewUrl:'',
            voiceVisible:false,
            voiceViewUrl:'',
            viewLoading:{
                status:false,
                txt:'加载数据...'
            },
            showVideoPlayer:false,
            playParam:{play_url:'',},
        }
    },
    created() {
        this.getDetails()
    },
    computed: {
        imageIndex() {
            return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
        }
    },
    methods: {
        /**
         * 关闭音频播放
         */
        closeAudio() {
            this.voiceVisible = false;
            document.getElementById("voicepoauy").pause();
        },
        getDetails() {
        let params = {
            id: this.$route.params.id,
        }
        const success = res => {
            let [date,ftime] = res.data.start_time.split(' ');
            let teaching_type = ''
            if(Object.is(res.data.teaching_type,1)) {
                teaching_type = '新授课';
            }
            if(Object.is(res.data.teaching_type,2)) {
                teaching_type = '复习课';
            }
            if(Object.is(res.data.teaching_type,3)) {
            teaching_type = '讲评课';
            }
            if(Object.is(res.data.teaching_type,4)) {
                teaching_type = '主题活动课';
            }
            this.form = Object.assign({},res.data, {
            date1: date,
            ftime: ftime,
            ltime: res.data.end_time.split(' ')[1],
            teaching_type: teaching_type,
            })
        }
        this.$ajax.get('api/teachingschedule/schedule_info',{params: params, func: {success: success}})
        },
        checkSource() {
        this.getsource();
        },
        getsource() {
        let params = {
            schedule_id: this.$route.params.id,
        }
        const success = res=> {
            this.sourceList = res.data;
            if(this.sourceList.length > 0) {
            this.accessoryFlag = true;
            } else {
            this.$message.error('暂无上传附件');
            }
        }
        this.$ajax.get('api/teachingschedule/teaching_schedule_resource',{params: params, func: {success: success}})
        },
        pdfPageChange(val){
                    this.viwPdfParam.page  = val;
                },
                error: function(err) {
                    //this.$message.error('读取文件失败');
                    
                },
        //pdf预览
                pdfView(url){
                    this.viwPdfParam.src =  (url)
                    // this.viwPdfParam.src =  pdf.createLoadingTask(url)
                },
                viewPDFClose(){
                    this.isPDFActive = true
        },
            /**
             * 查看图片
             * @param {Object} obj 记录信息
             */
            imgView(url) {
                this.imgViewUrl = url;
                this.imagePreview.showViewer = true;
                this.imagePreview.previewSrcList = [url];
            },
            closeViewer() {
                this.imagePreview.showViewer = false;
            },
        //关闭视频预览
                viewClose(){
                    this.showVideoPlayer = false;
                    this.isActive = true
            
                },
        //资源预览转发
                viewResource( obj ){
                    this.viewLoading.status = true;
                    this.accessoryFlag = false;
                    //视频预览
                    if( parseInt(obj.file_type) === 6 ){
                        this.isActive = false
                    }
                    //图片预览
                    else if( parseInt(obj.file_type) === 3 ) {
                        this.imgVisible  = true;
                    }
                    //文档预览
                    else if( parseInt(obj.file_type) === 1 ){
                        this.isPDFActive = false
                    }
                    //音频预览
                    else if( parseInt( obj.file_type ) === 5 ){
                        this.voiceVisible = true;
                    }else{
                        this.$message.warning("不支持预览的资源类型")
                        return false;
                    }
                    let success = ( data => {
                        var result  = data.data;
                        //视频预览
                        if( parseInt(result.file_type) === 6 ){
                            this.videoView(result.path);
                        }
                        //图片预览
                        else if( parseInt(result.file_type) === 3 ) {
                            this.imgView(result.path);
                        }
                        //文档预览
                        else if( parseInt(result.file_type) === 1 ){
                            this.pdfView( result.path);
                        }
                        //音频预览
                        else if( parseInt( result.file_type ) === 5 ){
                            this.voiceView(result.path)
                            //this.$message.warning("不支持预览的资源类型")
                        }else{
                            this.$message.warning("不支持预览的资源类型")
                        }
                    })
                    let fail = (data => {
                        this.viewLoading.status = false;
                        this.$message.error(data.msg)
                    })
                    this.$ajax.get('api/resource/view_info',{params: {id:obj.id,is_teaching_resource:1},func:{success:success,fail:fail}})
        },
        down(id){
            var form = document.createElement("form");
            form.action = this.BASE_URL+'/index/resource/teaching_schedule_resource_download';
            form.method = 'post';
            form.style.display = "none";
            var opt_id = document.createElement("textarea");
            opt_id.name = 'id';
            opt_id.value = id;
            form.appendChild(opt_id);
            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        },
        delete_confirm(obj){
                    let yes = ( data => {
            this.delete(obj.id,0);
            this.accessoryFlag = false;
                    })
                    let cancel = ( data => {})
                    this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 删除吗？'});
        },
        delete(id,status){
                let success = ( data => {
            this.$message.success(data.msg)
                    });
                    this.$ajax.delete('api/teachingschedule/manage_schedule_resource',{params:{schedule_id:this.$route.params.id,id:id},func:{success:success}})
            },
    },
    components: {
            // pdf,
            nativeVideo
        }
    }
</script>

<style lang="scss">
.coruse-detail {
    .form {
        width: 730px;
        .el-form-item__label {
        text-align: left;
        }
        .item-star {
        .el-form-item__label {
            position: relative;
        }
        }
        .form-item {
        position: relative;
        display: flex;
        .item-star:nth-of-type(2) {
            position: absolute;
            right: 0;
        }
        .el-input--small .el-input__inner {
            width: 260px;
        }
        }

    }
    .textarea-box {
        position: relative;
        height: 200px;
        padding: 0 8px;
        overflow-y: scroll;
        li {
        display: flex;
        height: 40px;
        line-height: 40px;
        border-top: 1px solid #ddd;
        &:last-child {
            border-bottom:1px solid #ddd;
        }
        .acc-name {
            flex: 1;
        }
        .acc-r {
            flex: 1;
            text-align: right;
        }
        }
    }

    .tips-footer {
        .footer-time {
            margin-right: 25px;
        }
        button {
        min-width: 35px;
        }
    }
    .el-table__body-wrapper table tbody {
                td:nth-child(8) {
                    padding: 0;
                }
            }
            .masking{
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transition: .5s;
                background: rgba(0,0,0,.3);
                z-index: 4;
                .maskingBox{
                    position: absolute;
                    top: 15%;
                    left: 50%;
                    width: 800px;
                    margin-left: -400px;
                    background: #fff;
                }
                .masking_h{
                    padding: 10px 15px;
                    background: #348EFC;
                    text-align: center;
                    text-align-last: justify;
                    >span,
                    >i{
                        font-size: 16px;
                        text-align-last: initial;
                        display: inline-block;
                        vertical-align: middle;
                        color: #fff;
                    }
                    >i{
                        cursor: pointer;
                    }
                }

            }

            .masking_c{
                .el-pagination{
                    padding-bottom: 20px;
                }
            }

            .activeLive{
                opacity: 0;
                visibility: hidden;
            }

            .imgVisible{
                display: inline-block;
                vertical-align: middle;
                background: none;
                text-align: left;
                min-width: 550px;
                min-height: 550px;
                background: rgba(109, 116, 125, 0.78);
                margin: 0;
                .el-dialog__header{
                    // display: none;
                }
                .el-dialog__body{
                    text-align: center;
                    padding: 0;
                    img{
                        max-width: 100%;
                    }
                }
            }
            .el-dialog__wrapper{
                text-align: center;
            }
    }
</style>
